<style lang="scss">
  .intro {
    margin: 30px;
    text-align: center;
  }

  .camera{
    /*position: fixed;*/
    /*top: 0;*/
    /*z-index: 2;*/
  }

  .webgl{
    /* position: absolute;
    top: 0;
    left:0;
    width: 750rpx; */
  }

  .base{
    width: 750rpx;
    /*height: 350rpx;*/
    position: fixed;
    z-index: 3;
    bottom: 92rpx;
    vertical-align: top;
    margin: 0;
    padding: 0;
  }

  .btn-wrap{
    position: fixed;
    width: 750rpx;
    height: 92rpx;
    overflow: hidden;
    z-index: 4;
    bottom: 0;

  }
  .btn{
    height: 92rpx;
    border-radius: 0;
  }

</style>
<template>



  <camera
    device-position="back"
    flash="off"
    style="width:750rpx;height:{{height+'px'}}"
    wx:show="{{show}}"
    binderror="error"
    class="camera"
    frame-size="large"
  ></camera>

  <cover-image style="height:{{baseH}}px" wx:if="{{show}}" mode="aspectFill" class="base" src="/assets/img/base.jpg"></cover-image>

  <cover-view class="btn-wrap">
    <button class="btn" bindtap="creat"  type="primary">分享</button>
  </cover-view>

  <canvas
    canvas-id="webgl2"
    class="webgl"
    bindtap="previewImage"
    wx:show="{{false}}"
    style="width: {{width*info.pixelRatio}}rpx; height: {{canvasH}}px;"
  >
  </canvas>


</template>

<script>
  import wepy from 'wepy'



  export default class AuthFunc extends wepy.page {
    config = {
      navigationBarTitleText: 'AI照片',
      'usingComponents': {
      }
    }
    components = {

    }

    data = {
      width: 0,
      height: 0,
      baseH:0,
      canvasH:0,
      shareImg:null,
      show:true,
      contextCTX:null,
      info: null, wrapCTX:null
    }

    computed = {

    }

    methods = {

      previewImage(){
        var _self = this, tempFilePath = this.data.shareImg;

        wx.previewImage({
          current: tempFilePath, // 当前显示图片的http链接
          urls: [tempFilePath] // 需要预览的图片http链接列表
        })

      },
      creat(){


        // return;
        var _self = this, ctx = _self.data.wrapCTX;
        let context = _self.data.wrapCTX;
        this.setData({'show':false})


        this.data.contextCTX.takePhoto({
          quality:'high',
          success:function(res){
            console.log(res.tempImagePath)
            let cameraTempPath = res.tempImagePath

            ctx.drawImage(cameraTempPath, 0, 0,_self.info.windowWidth,_self.height)

            ctx.drawImage('/assets/img/base.jpg', 0, _self.height,_self.info.windowWidth,_self.baseH)

            wx.showLoading({
              title: '生成图片',
            })
            context.draw()


            setTimeout(function () {

              wx.canvasToTempFilePath({
                x: 0,
                y: 0,
                width:_self.info.windowWidth,
                heigh:_self.canvasH,
                // destWidth:_self.info.windowWidth,
                // destHeight:outputH,
                fileType:'jpg',
                canvasId: 'webgl2',
                success: function (res) {

                  let shareImg = res.tempFilePath;
                  _self.setData({ 'shareImg': shareImg })
                  console.log(res)
                  wx.hideLoading()

                  wx.previewImage({
                    current: shareImg, // 当前显示图片的http链接
                    urls: [shareImg] // 需要预览的图片http链接列表
                  })



                  // wx.saveImageToPhotosAlbum({
                  //   filePath:res.tempFilePath,
                  //   success(res) { console.log(222222222);wx.showToast({
                  //     title: '保存成功',
                  //   }) }
                  // })
                },
                fail: function (res) {
                }
              })
            }, 500)


          }
        })
      }

    }

    events = {

    }



    onReady() {
      const content = wx.createCameraContext()
      const wrap = wx.createCanvasContext('webgl2',this)
      const info = wx.getSystemInfoSync()

      this.contextCTX = content
      this.info = info
      this.wrapCTX = wrap

      this.width = info.windowWidth
      this.height = info.windowHeight-parseInt(info.windowWidth/658*372);//去掉底部照片

      this.baseH = parseInt(info.windowWidth/658*372);
      this.canvasH = info.windowHeight
      this.$apply()
      //this.setData({ 'contextCTX': conent, 'info': info, 'wrapCTX': wrap})



    }

    onLoad() {
      let self = this

    }
  }
</script>
